<script setup>
import { computed } from 'vue';
let props=defineProps(['msg','type'])
let color = {info:'#3f0',warn:'#f66',error:'#c00'};
let ys = computed(()=>{
    return {backgroundColor:color[props.type]}
})
</script>

<template>
<div class="box" :style="ys">
    {{ msg }}
</div>
</template>

<style scoped>
.box{
    display: inline-block;
    padding: 5px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 5px;
    opacity: 0.5;
    color: #3ff;
    
}

</style>